<template>
  <div class="h-full ">
    <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="0"
        :show-trigger="showTrigger"
        :width="300"
        class="h-full">
      <div class="flex flex-col h-full overflow-hidden">
        <header class="px-3 pt-3">
          <n-button @click="handleCreateNewSession" size="large" block type="success">
            <TextIcon icon="tdesign:chat-add" text="新会话" :size="25"></TextIcon>
          </n-button>
        </header>
        <n-divider></n-divider>
        <n-scrollbar>
          <div class="px-3 space-y-3 py-2">
            <div v-for="(item,index) in list" :key="index">
              <SessionItem :item="item"></SessionItem>
            </div>
          </div>
        </n-scrollbar>
        <n-divider></n-divider>
        <footer class="truncate text-center pb-3">
          共{{ num }}个会话
        </footer>
      </div>
    </n-layout-sider>

  </div>
</template>

<script setup lang="ts">
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {useAiStore, useAppStore, useUserStore} from "@/store";
import {storeToRefs} from "pinia";
import SessionItem from "@/view/pc/ai/components/SessionItem.vue";
import {computed} from "vue";

defineProps({
  showTrigger: {
    type: Boolean,
    default: true
  }
})

const {userInfo, isLogin} = storeToRefs(useUserStore())
const {authModalShow} = storeToRefs(useAppStore())
const aiStore = useAiStore()
const {sessionList} = storeToRefs(aiStore)

const num = computed(() => {
  return sessionList.value.filter(item => item.username === userInfo.value.username).length
})

const list = computed(() => {
  return sessionList.value.filter(item => item.username === userInfo.value.username)
})


const handleCreateNewSession = () => {
  if (!isLogin.value) {
    aiStore.createNewSession(userInfo.value.username)
  } else {
    window.$message.error('请先登录')
    authModalShow.value=true

  }
}


</script>

<style scoped>
:deep(.n-card__content:first-child) {
  padding: 10px;
}
</style>